<template>
  <el-container>
    <el-header style="padding: 1.2%">
      <el-row>
        <el-col :md="2">
          <el-image style="width: 88%;"
                    src="https://www.baidu.com/img/flexible/logo/pc/result.png"></el-image>
        </el-col>
        <el-col :md="8">
          <el-input
              style="width: 100%;"
              v-model="keyWord"
              placeholder="请输入内容" 
              @keyup.enter.native="searchBtn" 
              >
            <el-button id="search_btn" slot="append" @click="searchBtn">搜索一下</el-button>
             
          </el-input>
        </el-col>
       
      </el-row>
    </el-header>
    <el-main style="padding: 0">
      <el-row>
        <el-col :md="16" :offset="2">
          <el-tabs v-model="searchTitle"  >
            <el-tab-pane name="one">
              <span slot="label"><i class="el-icon-search"></i>文档</span>
              <el-row>
                <p class="small_tip">为您找到相关结果约{{ searchResults.total }}个</p>
                <el-col :md="14" :offset="0">
                  <div class="news_content"
                       v-for="hit in searchResults.contents" :key="hit.id">
                    <div class="news_title">
                      <a :href="hit.url" v-html="hit.title" target="_blank"/>
                    </div>
                    <div class="text-item limit-line" v-html="hit.content"/>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            
          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="background: rgb(245,245,246);width: 100%;position:fixed; bottom:0;">
      <el-col :md="16" :offset="1">
        <el-pagination
            background
            :page-size="size"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
      </el-col>
    </el-footer>
  </el-container>
</template>

<script lang='ts'>
import {Component, Ref, Vue} from 'vue-property-decorator';


@Component
export default class Search extends Vue {
  private keyWord: string = '';
  private searchTitle: string = 'one';
  private searchResults = {};
  private total: number = 0;
  private size: number = 10;

  /**
   * 编辑搜索
   */
  public searchBtn() {
    this.axios.get(process.env.VUE_APP_BASE_API + `book/search?pager=0&size=${this.size}&text=${this.keyWord}`)
        .then((resp) => {
          this.searchResults = resp.data;
          this.total = resp.data.total;
        });
  }

  /**
   * 页码改变
   */
  public currentChange(val: number) {
    this.axios.get(process.env.VUE_APP_BASE_API + `book/search?pager=${val-1}&size=${this.size}&text=${this.keyWord}`)
        .then((resp) => {
          this.searchResults = resp.data;
        });
  }
  
  /**
   * 钩子函数
   */
  public mounted() {
    this.keyWord = this.$route.params.key_word;
    this.axios.get(process.env.VUE_APP_BASE_API + `book/search?pager=0&size=${this.size}&text=${this.keyWord}`)
        .then((resp) => {
          this.searchResults = resp.data;
          this.total = resp.data.total;
        });
  }

}
</script>

<style scoped>
/* 强制设置tab的长度 */
>>> .el-tabs__item {
  padding: 0 3%;
}

/* 搜索按钮 */
#search_btn {
  background: #409EFF;
  color: whitesmoke;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  height: 40px;
}

#search_btn:hover {
  background: #4060ff;
}

/* 条数提示 */
.small_tip {
  font-size: 12px;
  color: #c4c7ce;
  margin: 0;
  padding: 0;
}

/* 右边连接 */
.header-right {
  margin: auto 0 auto 6%;
}

/* 新闻内容 */
.news_content {
  padding: 0;
  margin-top: 4%;
}

/* 标题设置 */
.news_title {
  margin-top: 1%;
  font-size: 18px;
  width: 88%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 内容设置 */
.limit-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

/* 问题样式 */
.text-item {
  margin-top: 1.5%;
}
</style>